<template>
	<view class="content">
		<!-- 头部 -->
		<view class="helmet">
			<view class="tome">
				<view class="to_snum">
					<u-icon name="kefu-ermai" color="#fff" size="42"></u-icon><text>Hi，很高兴为你服务~</text>
				</view>
			</view>
		</view>
		<view class="per_info">
			<view class="sea_ipt">
				<u-icon name="search" color="#9D9E9D" size="32"></u-icon>
				<u-input placeholder="搜索" placeholderStyle="font-size: 28rpx;color: #4A4A4A"></u-input>
			</view>
		</view>
		<view class="per_info per_info1">
			<view class="quick_list">
				<view class="quick_item">
					<image src="@/static/device/shezhi.svg" mode=""></image>
					<text>账号绑定</text>
				</view>
				<view class="quick_item">
					<image src="@/static/device/computer-phone.svg" mode=""></image>
					<text>智能设备</text>
				</view>
				<view class="quick_item">
					<image src="@/static/device/zhuanshi.svg" mode=""></image>
					<text>会员权益</text>
				</view>
				<view class="quick_item">
					<image src="@/static/device/shangcheng.svg" mode=""></image>
					<text>商城问题</text>
				</view>
				<view class="quick_item">
					<image src="@/static/device/gantanhao.svg" mode=""></image>
					<text>意见反馈</text>
				</view>
				<view class="quick_item">
					<image src="@/static/device/neibufankui.svg" mode=""></image>
					<text>反馈进度</text>
				</view>
			</view>
		</view>

		<view class="per_info per_info2">
			<u-collapse :item-style="itemStyle">
				<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index" :open="item.open"
					:disabled="item.disabled">
					{{item.body}}
					<view class="resolved">
						<view class="">
							<u-icon name="thumb-up-fill" color="#9D9E9D" size="28"></u-icon>已解决
						</view>
						<view class="">
							<u-icon name="thumb-down-fill" color="#9D9E9D" size="28"></u-icon>未解决
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<view class="problem">
			<view class="">
				<image src="../../static/device/duanxin.png" mode=""></image>
				<text>全部问题</text>
			</view>
			<text class="line">|</text>
			<view class="">
				<image src="../../static/device/duanxin.png" mode=""></image>
				<text>我要反馈</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [{
					head: "怎么申请发票",
					body: "购买后可以在「我的账户」-「购买订单」中直接填写开票信息申请发票。",
					open: true,
				}, {
					head: "项目找不到",
					body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
					open: false,
				}, {
					head: "如何联系人工客服",
					body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
					open: false,
				}],
				itemStyle: {
								color: '#101010',
								fontSize:'28rpx'
							}
			};
		},
		methods: {

		},
	};
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		
		.helmet {
			position: relative;
			width: 100%;
			z-index: 9;
			background: #fafafa;

			.tome {
				position: relative;
				z-index: 1;
				background-color: $maincolor;
				box-sizing: border-box;
				padding: 0 44rpx;

				.to_snum {
					padding: 12rpx 0 140rpx 0;
					text-align: center;
					font-size: 36rpx;
					color: #FFFFFF;

					text {
						margin-left: 38rpx;
					}
				}

			}
		}

		.per_info {
			position: relative;
			z-index: 10;
			box-sizing: border-box;
			background: #FFFFFF;
			padding: 40rpx 40rpx -10rpx 40rpx;
			border-radius: 12rpx;
			margin: 0 20rpx;
			margin-top: -35rpx;

			.sea_ipt {
				display: flex;
				align-items: center;
				margin: 0 20rpx;

				u-icon {
					margin-right: 26rpx;
				}
			}

			.quick_list {
				display: flex;
				flex-wrap: wrap;
				padding: 40rpx 0;

				.quick_item {
					width: 33%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-bottom: 50rpx;

					image {
						width: 65rpx;
						height: 65rpx;
						margin-bottom: 20rpx;
					}

					text {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}
		}

		.per_info1 {
			margin: 20rpx 20rpx;
		}

		.per_info2 {
			margin-top: 20rpx;
			padding: 10rpx 20rpx;
			/deep/ .u-collapse-head{
				font-size: 28rpx;
				color: #101010;
				
			}
			/deep/ .u-collapse-content{
				font-size: 28rpx;
				color: #101010;
				padding: 24rpx 0;
				
			}
			/deep/ .u-collapse-item{
				border-top:1rpx solid #f0f0f0 ;
				border-bottom:1rpx solid #f0f0f0 ;
			}
			.resolved{
					display: flex;
					justify-content: center;
					margin-top: 26rpx;
				view{
					padding: 10rpx 22rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					color: #9D9E9D;
					border-radius: 8rpx;
					border: 2rpx solid #9D9E9D;
					u-icon{
						margin-right: 10rpx;
					}
				}
				view:nth-child(1){
					margin-right: 40rpx;
				}
			}
		}
		.problem{
			position: fixed;
			z-index: 10;
			bottom: 0;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			background: #0581FD;
			font-size: 28rpx;
			color: #FFFFFF;
			padding: 40rpx 0;
			image{
				width: 38rpx;
				height: 38rpx;
				margin-right: 20rpx;
			}
			view{
				display: flex;
				align-items: center;
			}
		}
	}
</style>
